<template>
	<div class="system-add-dept-container">
		<el-drawer title="修改认证客户端" v-model="state.showWindows" @close="onCancel">
			<el-form ref="formRef" :model="state.oauthClient" :rules="state.rules" size="small" label-width="30%" style="width: 90%">
        <el-form-item label="客户端名称" prop="redirectUris">
          <el-input v-model="state.oauthClient.clientName" placeholder="请输入客户端名称" />
        </el-form-item>
        <el-form-item label="可访问资源" prop="resourceIds">
          <el-checkbox
              v-model="state.oauthClient.resourceIds"
              v-for="val in state.oauthService"
              :label="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)"
              :key="val.itemName"
              size="large">
            {{val.itemName}}
          </el-checkbox>
        </el-form-item>
        <el-form-item label="授权方式" prop="grantTypes" >
          <el-checkbox
              v-model="state.oauthClient.grantTypes"
              v-for="val in state.oauthType"
              :label="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)"
              :key="val.itemName"
              size="large">
            {{val.itemName}}
          </el-checkbox>
        </el-form-item>
        <el-form-item label="访问域" prop="scopes">
          <el-checkbox
              v-model="state.oauthClient.scopes"
              v-for="val in state.oauthScope"
              :key="val.itemName"
              :label="val.itemCode.substring(val.itemCode.lastIndexOf('.') + 1)"
              size="large">
            {{val.itemName}}
          </el-checkbox>
        </el-form-item>
				<el-form-item label="授权之后回调地址" prop="redirectUris">
					<el-input v-model="state.oauthClient.redirectUris" placeholder="请输入授权之后回调地址" />
				</el-form-item>
				<el-form-item label="是否必选" v-if="!isValidString(state.oauthClient.tenantId)">
					<el-switch v-model="state.oauthClient.mandatory"></el-switch>
				</el-form-item>
				<el-form-item label="是否只读" v-if="!isValidString(state.oauthClient.tenantId)">
					<el-switch v-model="state.oauthClient.readonly"></el-switch>
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup>
import {reactive, ref, defineEmits, defineExpose} from 'vue';
import { editOauthClient, getOauthClientInfo } from '/@/api/tenant/oauthClient/index';
import { ElMessage } from 'element-plus';
import { isValidString } from '/@/utils/stringUtils';
import {getDictItemByCode} from "/@/api/sys/dict";

const formRef = ref();
const emit = defineEmits(['initTableData']);

const state = reactive({
	showWindows: false,
  oauthType: [],
  oauthService:[],
  oauthScope:[],
	oauthClient: {
    clientId: '',
    clientName: '',
		resourceIds: [],
		grantTypes: [],
		scopes: [],
		redirectUris: '',
    mandatory: false,
    readonly: false,
    platform: true,
    tenantId: '',
	},
	clientId: '',
	rules: {
		resourceIds: [{ required: true, message: '请输入可访问资源', trigger: 'blue' }],
		grantTypes: [{ required: true, message: '请输入授权方式', trigger: 'blue' }],
		scopes: [{ required: true, message: '请输入访问域', trigger: 'blue' }],
		redirectUris: [{ required: false, message: '请输入授权之后回调地址', trigger: 'blue' }],
	},
});

//打开添加窗口
const openWindows = async (clientId: any, tenantId: any) => {
  state.clientId = clientId;
  await getOauthClientInfo(clientId).then((res: any) => {
    state.oauthClient = res.data;
  });
  state.oauthClient.tenantId = tenantId;
  state.showWindows = true;

  initOauthType()
  initOauthService()
  initOauthScope()
};

//取消
const onCancel = () => {
	formRef.value.resetFields();
	state.showWindows = false;
};

//提交
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
      state.oauthClient.clientId = state.clientId;
      state.oauthClient.platform = !isValidString(state.oauthClient.tenantId);
			editOauthClient(state.oauthClient, state.clientId).then((res: any) => {
				if (res.code == 200) {
					onCancel();
					emit('initTableData');
				} else {
					ElMessage.error(res.message);
				}
			});
		}
	});
};

defineExpose({
	openWindows,
});

/**
 * 初始化授权方式
 */
const initOauthType =()=>{
  getDictItemByCode("sys.oauth.type").then((res:any)=>{
    state.oauthType = res.data
  });
}

/**
 * 初始化授权的服务
 */
const initOauthService =()=>{
  getDictItemByCode("sys.oauth.service").then((res:any)=>{
    state.oauthService = res.data
  });
}

/**
 * 初始化授权的访问域
 */
const initOauthScope =()=>{
  getDictItemByCode("sys.oauth.scope").then((res:any)=>{
    state.oauthScope = res.data
  });
}
</script>

<style scoped>
.cropper-img {
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
</style>
